<template>
    <div style="width: 100%;height: 100%;position: relative;background-color: red">
        <!-- 粒子效果实现 -->
        <vue-particles
                color="#fff"
                :particleOpacity="0.7"
                :particlesNumber="60"
                shapeType="triangle"
                :particleSize="4"
                linesColor="#6a9955"
                :linesWidth="2"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="2"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
                class="lizi"
        />
        <div style="width: 100%;height: 100%;" class="box-center">
            <div style="width: 40%;height: 60%;display: flex;flex-direction: column;position: relative;" class="loginPart">
                <div style="flex: 0 1 15%;color: #fff;" class="box-center">
                    <h2>用户登录</h2>
                </div>
                <div style="flex: 1 1;" class="box-center">
                    <el-form
                            :model="user"
                            :rules="rules"
                            ref="ruleForm"
                            label-width="100px"
                            class="demo-ruleForm"
                    >
                        <el-form-item label="用户名" prop="username">
                            <el-input
                                    v-model.trim="user.username"
                                    placeholder="请输入账号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input
                                    placeholder="请输入密码"
                                    v-model.trim="user.password"
                                    show-password
                                    @keyup.enter.native="handleLogin('ruleForm')"
                            ></el-input>
                        </el-form-item>
                        <div class="box-center">
                            <el-button
                                    type="primary"
                                    @click="handleLogin('ruleForm')"
                                    :loading="btnLoading"
                            >
                                登录
                            </el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </div>
                    </el-form>
                </div>
                <div style="position: absolute;left: 0;bottom: 3px;width:100%;height: 30px;" class="box-center">
                    {{version}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {encryptCBC} from "@/util/aesEncrypt";
    import {timeFix} from "@/util/util";
    import * as loginApi from "@/api/login";

    export default {
        name: "UserLogin",
        data() {
            return {
                btnLoading: false,
                user: {
                    username: "",
                    password: "",
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: "请输入用户名",
                            trigger: "blur",
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: "请输入密码",
                            trigger: "blur",
                        },
                    ],
                },
            };
        },
        computed: {
            version() {
                return window.global_value.VUE_APP_VERSION;
            },
        },
        methods: {
            // 登录方法
            handleLogin(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (!valid) {
                        this.alertErr("提交失败，请刷新页面重试");
                        return false;
                    }
                    this.btnLoading = true;
                    try {
                        let encryptResult = await loginApi.getEncryptedString();
                        if (encryptResult.code !== 200) {
                            this.alertErr("获取加密key失败：" + encryptResult.message);
                        }
                        //获取aes加密key
                        let password = encryptCBC(
                            this.user.password,
                            encryptResult.data.key,
                            encryptResult.data.iv
                        );
                        let res = await loginApi.login({
                            username: this.user.username,
                            password: password,
                        });
                        if (res.code !== 200) {
                            this.alertErr(res.message);
                            return;
                        }
                        //向vuex中存储用户信息
                        let userInfo = res.data;
                        this.$store.dispatch("user/saveUserInfo", userInfo);
                        //登录成功
                        // 关键：检查路由中是否有 redirect 参数
                        let redirectPath = this.$route.query.redirect;
                        // 如果有 redirect 参数，且不是登录页，则跳转到该路径
                        if (redirectPath && redirectPath !== '') {
                            // 使用 replace 避免回退到登录页
                            this.$router.push(redirectPath);
                        } else {
                            // 没有 redirect 参数，跳转到默认首页
                            this.$router.push("/test001/homeIndex");
                        }

                        //弹出暖心提示
                        this.$notify({
                            title: "欢迎",
                            message: `${timeFix()}，欢迎回来`,
                        });
                    } catch (error) {
                        this.alertErr("操作异常：" + error.message);
                    } finally {
                        this.btnLoading = false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            alertErr(msg) {
                this.$message.error(msg);
            },
        },
    };
</script>
<style lang="scss" scoped>


    // 粒子动画
    .lizi {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
        background-image: radial-gradient(#002953, #041222);
    }

    /*登录框*/
    .loginPart {
        /*实现块元素百分比下居中*/
        padding: 50px;
        /*box-sizing设置盒子模型的解析模式为怪异盒模型， 将border和padding划归到width范围内*/
        box-sizing: border-box;
        /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
        box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
        /*边框圆角，四个角均为15px*/
        border-radius: 15px;
        /*背景颜色为黑色，透明度为0.8*/
        background: rgba(211, 227, 253, 0.7);
        background-size: cover;
    }

    /*这是form中的label*/
    ::v-deep .demo-ruleForm label {
        color: #1d1c1c;
        font-weight: bold;
    }
</style>